<template>
    <div>
        <div class="bread_crumb">
            <bread-crumb></bread-crumb>
        </div>

        <h1> 学生信息录入表</h1>
        <el-form ref="form" :model="form" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="学号:">
                        <el-input v-model="form.stu_id"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <el-input v-model="form.stu_name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:">
                        <el-radio-group v-model="form.stu_sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="籍贯:">
                        <el-cascader v-model="value" :options="options" :props="{
                            label: 'name',
                            value: 'name'
                        }" @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="头像">
                        <el-button @click="upLoad">点击上传图片</el-button>
                        <el-button @click="goCamera">拍照上传</el-button>
                        <input type="file" @change="getFile" ref="getInp" hidden name="" id="" />
                        <div>
                            <img width="100px" height="100px" :src="form.stu_head_img" alt="" srcset="" />
                        </div>

                        <div>
                            <p>
                                注：将其转为base64字符串上传，图片大小为1M左右，否则不能上传
                            </p>
                        </div>
                    </el-form-item>
                </el-col>

            </el-row>



            <el-form-item label="出生日期:">
                <el-date-picker v-model="form.stu_date" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="男女朋友:">
                <el-input v-model="form.stu_gbf"></el-input>
            </el-form-item>
            <el-form-item label="爱好">
                <Toolbar style="border-bottom: 1px solid #ccc;  font-size: 40px;" :editor="editor"
                    :defaultConfig="toolbarConfig" :mode="mode" />
                <div class="wangEditWrap" style="height: 300px; overflow: hidden; font-size: 40px;">
                    <Editor style="height: 400px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig"
                        :mode="mode" @onCreated="onCreated" />
                </div>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button type="primary" @click="onReset">重置</el-button>

            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { req_area, req_stu_info } from '@/api/stuInfo.js';
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
    data() {
        return {
            form: {
                stu_id: '',
                stu_name: '',
                stu_sex: '',
                stu_jg: '',
                stu_date: '',
                stu_hobby: '',
                stu_gbf: '',
                stu_head_img: '',
            },
            value: [],
            options: [],
            // 富文本编辑器组件的初始化数据
            editor: null,
            html: "<p>hello</p>",
            toolbarConfig: {},
            editorConfig: { placeholder: "请输入内容..." },
            mode: "default",
        };

    },
    methods: {
        goCamera() {
            this.$router.push({
                name: 'camera'
            })
        },
        async onSubmit() {
            console.log('submit!');
            console.log(this.form);
            this.form.stu_hobby = this.editor.getText();//获取富文本里输入的内容
            let result = await req_stu_info(this.form);
            console.log(result);
            this.$message({
                message: '数据提交成功',
                type: 'success',
                offset: 130,
            })
        },
        onReset() {
            console.log('重置');
            // this.$nextTick(()=>{
            //     this.$refs.form.resetFields();
            // });
            this.form.stu_id = '';
            this.form.stu_name = '';
            this.form.stu_sex = '';
            this.form.stu_date = '';
            this.form.stu_gbf = '';
            this.form.stu_head_img = '';
            this.value = [];
            this.html = '<p></p>';
        },
        handleChange(value) {
            console.log(value);
            this.form.stu_jg = value.join('-');
            console.log(this.form.stu_jg);
        },
        onCreated(editor) {
            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
        },

        getFile() {
            console.log("获取图片的函数");
            console.log(this.$refs.getInp);
            let that = this;
            let f = this.$refs.getInp.files[0];
            let fr = new FileReader();
            fr.readAsDataURL(f);
            fr.onload = function () {
                that.form.stu_head_img = fr.result;
            }
        },
        upLoad() {
            this.$refs.getInp.click();
        }
    },
    async mounted() {
        let result = await req_area();
        console.log(result);
        this.options = result.data;
        console.log(this.$route.query);
        this.form.stu_head_img = this.$route.query.imgSrc;

    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    },

    components: {
        Editor,
        Toolbar,
    },

}
</script>

<style lang="scss" scoped>
h1 {
    text-align: center;
    line-height: 50px;
    font-size: 10px;
}

.el-input__inner,
.el-button {
    height: 20px;
    font-size: 10px;
    padding: 10px;
}   

.el-form-item__label {
    font-size: 10px;
}

p {
    font-size: 10px;
}


</style>